<template>
  <div class="page-warpper">
    测试的分支
    <br>
    <header-temp :info="headerInfo"
                 class="mtb"></header-temp>

    <card-normal :info="dataPrepare"
                 title="请准备好以下资料，等待收集"
                 class="mtb"
                 :only="true"></card-normal>
    <image-cell type="download"
                class="mtb"
                @btnClick="downloadFile"></image-cell>
    <image-cell type="service"
                name="xxx"
                class="mtb"></image-cell>
    <h3>资料收集</h3>
    <data-coll-status :status="300"
                      class="mtb"
                      @btnClick="lookDetail"></data-coll-status>
    <data-coll-status :status="400"
                      class="mtb"
                      reason="资料上传错误"
                      @btnClick="updateData"></data-coll-status>
    <data-coll-status :status="800"
                      class="mtb"
                      @btnClick="lookDetail"></data-coll-status>
    <df-status :status="0"
               class="mtb"></df-status>
    <df-status :status="2"
               class="mtb"></df-status>
    <df-status :status="1"
               :pass="1"
               class="mtb"></df-status>
    <df-status :status="1"
               :pass="2"
               class="mtb"></df-status>
    <h3>出院结算</h3>
    <out-hpt-status :status="300"
                    class="mtb"
                    @lookClick="lookDetail"></out-hpt-status>
    <out-hpt-status :status="400"
                    class="mtb"
                    reason="资料上传错误"
                    @btnClick="updateData"></out-hpt-status>
    <out-hpt-status :status="800"
                    :pass="false"
                    reason="资料上传错误"
                    @lookClick="lookDetail"
                    @btnClick="addPost"
                    class="mtb"></out-hpt-status>
    <out-hpt-status :status="800"
                    :pass="true"
                    @lookClick="lookDetail"
                    class="mtb"></out-hpt-status>

    <card-detail :info="cardInfo"
                 class="mtb"></card-detail>

    <card-normal :infoList="orderInfo"
                 title="订单详情"
                 class="mtb"></card-normal>

    <card-normal :info="uploadStr"
                 title="请上传资料"
                 :only="true"
                 class="mtb"
                 :ifButton="true"
                 @btnClick="uploadData">上传资料</card-normal>
    <money-list :info="dyMoney"
                class="mtb"></money-list>
    <copy-card :info="copyLink"
               class="mtb"></copy-card>
    <service-step class="mtb"
                  :infoList="dataCollList"></service-step>

    <van-overlay :show="postShow">
      <pop @close="closeAddPost"
           @ok="okAddPost"
           title="补充邮寄资料信息">
        <div class="post-box">
          <van-field v-model="postForm.orderId"
                     placeholder="请输入"
                     label="快递单号"
                     style="font-size:12px"
                     input-align="right" />
          <van-cell title="快递公司 (优先使用顺丰速递)"
                    style="font-size:12px"
                    is-link
                    @click="postCompanyShow=true"
                    value="请选择"></van-cell>
        </div>
        <div class="post-box post-desc">
          <div class="title">邮寄说明</div>
          <p>1、邮寄地址：北京市朝阳区光华路9号时尚大厦16层优加健康</p>
          <p> 2、第一次和第二次邮寄说明XXXXXXXXXXXXX</p>
          <div class="grey-title">快递单附件</div>
          <!--这个的用法看以前的-->
          <image-upload @imgList="getImgList"
                        :alreadyImg="[]"></image-upload>
        </div>
      </pop>
    </van-overlay>
    <van-popup v-model="postCompanyShow" round position="bottom">
    <van-picker show-toolbar
                :columns="postCpyList"
                @confirm="onConfirm"
                @cancel="onCancel"
                @change="onChange" />
    </van-popup>
    <!-- <van-overlay :show="postCompanyShow">

      <post-cpy @close="closePostCpy"
                @ok="okPostCpy">
        213

      </post-cpy>

    </van-overlay> -->

  </div>

</template>

<script >
  import HeaderTemp from '@/components/orderTemplate/header'//头部（有客服按钮）
  import cardDetail from '@/components/orderTemplate/cardDetail'//详情卡片
  import cardNormal from '@/components/orderTemplate/cardNormal'//通用卡片
  import imageCell from '@/components/orderTemplate/imageCells'//左边带粉图的
  import dataCollStatus from '@/components/orderTemplate/dataCollectionStatus'//资料收集状态
  import dfStatus from '@/components/orderTemplate/dfStatus'//垫付状态
  import outHptStatus from '@/components/orderTemplate/outHospitalStatus'//垫付状态
  import moneyList from '@/components/orderTemplate/moneyList'//垫付金额
  import copyCard from '@/components/orderTemplate/copyCard'//垫付金额
  import serviceStep from '@/components/orderTemplate/serviceStep'//服务进度
  import imageUpload from '@/components/orderTemplate/imageUpload'//图片上传
  import pop from '@/components/orderTemplate/popComponet'

  export default {
    components: {
      HeaderTemp,
      cardDetail,
      cardNormal,
      imageCell,
      dataCollStatus,
      dfStatus,
      moneyList,
      copyCard,
      serviceStep,
      outHptStatus,
      imageUpload,
      pop
    },
    mounted() {

    },
    data() {
      return {
        getImgList: [],
        postCpyList: ['顺丰快递', '中通快递', "圆通快递", "申通快递", "韵达快递"],
        postCompanyShow: false,
        postShow: false,
        postForm: {
          orderId: ""
        },
        headerInfo: {
          title: '资料收集',
          desc: '订单申请已提交，客服人员将与您电话联系，请注意接听电话'
        },
        cardInfo: {
          title: '住院垫付',//卡片标题
          userName: '王女士',
          sex: '女',
          paperType: '身份证',
          paperNum: '230124198808121100',
          phone: '15210999999',
          provinceName: '北京市',
          cityName: '朝阳区',
          countryName: '',
          hospital: '北京协和医院',
          diseases: '所患疾病，所患疾病，所患疾病，所患疾病所患疾病,订单申请已提交，客服人员将与您电话联系，请注意接听电话,订单申请已提交，客服人员将与您电话联系，请注意接听电话'//所患疾病
        },
        //订单信息
        orderInfo: [
          { name: '订单编号', value: "3300 3200 3344899889" },
          { name: '创建时间', value: "2018-04-28 20:42:56" },
        ],
        dataPrepare: "1、预交金/住院押金单金额/欠费单/催缴单 </br> 2、患者身份证正、反面图片，社保卡，银行卡正、反面，保单图片 </br>3、入院记录、体检报告、病理报告(有就提供)、门急诊病例等图片 </br>4、客服将根据用户情况收集其他相关资料，为了提高垫付审核率，辛苦配合上传资料",
        uploadStr: "金额凭证：催缴单/欠费单",
        dyMoney: {
          title: '垫付总金额',
          count: 1000,
          list: [
            { key: '2021/01/08', value: "500" },
            { key: '2021/01/08', value: "300" },
            { key: '2021/01/08', value: "200" },
          ]
        },
        copyLink: {
          title: '《保险金转账授权委托书》',
          linkUrl: 'https://dribbble.com/search/'
        },
        dataCollList: [
          {
            title: '资料收集',
            time: "05-17 14:05",
            tips: "垫付资料终审通过",
            otherList: ["是否垫付：是"]
          },
          {
            title: '资料收集',
            time: "05-17 14:05",
            tips: "垫付资料终审中"
          },
          {
            title: '资料收集',
            time: "05-17 14:05",
            tips: "资料审核不通过",
            otherList: ["原因：资料上传错误", "服务人员：松松护士"]
          },
          {
            title: '已提交',
            time: "05-17 14:05",
            tips: "订单申请已提交，客服人员将与您电话联系，请注意接听电话"
          },

        ]
      }
    },
    methods: {
      onConfirm(val) {
        console.log('点击了确认',val)
        this.postCompanyShow = false
      },
      onCancel() {
        this.postCompanyShow = false
      },
      uploadData() {
        //按钮逻辑
        console.log('点击了按钮')
      },
      downloadFile() {
        console.log('跳转下载页')
      },
      updateData() {
        console.log('修改材料')
      },
      lookDetail() {
        console.log('查看')
      },
      addPost() {
        console.log('补充邮寄资料信息')
        this.postShow = true
      },
      closeAddPost() {
        this.postShow = false
      },
      okAddPost(){
        console.log('ok')
      },
      onChange(val,idx) {
        console.log("选择了",val,idx)
      }    }
  }
</script>

<style scoped  lang="less">
  .page-warpper {
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    height: 500vh;
  }
  .mtb {
    margin: 12px;
    border-radius: 4px;
  }
  .post-wrapper {
    display: flex;
    align-items: flex-end;

    height: 100%;
  }
  .box-wrapper {
    border-radius: 10px 10px 0 0;
    background: #f5f5f5;
  }
  .post-box {
    width: 100%;
    background-color: #fff;
    /* border-radius: 10px 10px 0 0; */
    /* padding:19px 20px; */
  }
  .post-box + .post-box {
    margin-top: 12px;
  }

  .flex {
    display: flex;
    justify-content: space-between;
  }
  .post-line {
    border-bottom: 1px solid #e6e6e6;
    padding: 19px 20px;
    font-size: 14px;
    font-weight: 400;
    .grey {
      color: #999999;
    }
    .orange {
      color: #ffa419;
    }
    .title {
      font-size: 15px;
      font-weight: 600;
      color: #333333;
    }
  }
  .post-desc {
    padding: 12px 20px 0 20px;
    .title {
      font-size: 13px;
      font-weight: 500;
      color: #333333;
      margin-bottom: 8px;
    }
    p {
      font-size: 11px;
      line-height: 13px;
      color: #666666;
      margin-bottom: 8px;
    }
    .grey-title {
      color: #666666;
      font-weight: 400;
      font-size: 12px;
      margin-top: 10px;
    }
  }
  /deep/ .van-picker__confirm {
  color: #fe8627;
}
</style>
